<template>
    <div class="box">
        <div class="left">
            <div class="title">
                {{ props.name }}
            </div>
            <div class="module">
                所属板块：
                <span>{{ props.module_name }}({{ props.item_name }})</span>
            </div>
            <div class="activity_time">
                活动时间：
                <span>{{ formatDate(new Date(props.createtime * 1000), 'yyyy-MM-dd') }}</span>~
                <span>{{ formatDate(new Date(props.createtime * 1000), 'yyyy-MM-dd') }}</span>
            </div>
        </div>
        <div class="right">
            <el-button @click="pageToDetail" v-if="!teacher" type="primary" color="#F3806F" :dark=true>
                <i class="fontcol">报名</i>
            </el-button>
            <el-button @click="pageToManage" v-if="teacher" type="primary" color="#F3806F" :dark=true>
                <i class="fontcol">管理</i>
            </el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import formatDate from "@/utils/date";
import useActivityStore from "@/stores/activity";
import useUserStore from '@/stores/user';
const userStore = useUserStore();
const teacher = (parseInt('' + userStore.userInfo?.group_id) > 1) ? true : false

const router = useRouter()

const props = defineProps(['id', 'createtime', 'item_name', 'module_name', 'name'])
const activityStore = useActivityStore()


const pageToDetail = () => {
    activityStore.id = props.id
    router.push('/activity_detail')
}
const pageToManage = () => {
    activityStore.id = props.id
    router.push('/activity_manage')
}


</script>

<style scoped>
.box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('@/assets/images/back.png');
    background-repeat: no-repeat;
    background-size: cover;


    .left {
        margin: 24px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 14px;

        .title {}

        .module {
            margin-top: 10px;
            font-weight: 600;
        }

        .activity_time {
            margin-top: 5px;
            font-size: 10px;
        }
    }

    .right {
        margin-right: 20px;

        .fontcol {
            color: white;
            font-weight: 600;
        }
    }

}
</style>